import React from 'react';
import { Progress, Button, Modal } from 'antd';

export default class RenderUpgrade extends React.PureComponent {
  handleChange = () => {
    Modal.info({
      title: '切换模式2有如下注意点',
      content: (
        <ol type="1">
          <li>1 模式2速度会提升，但是会比模式1占用更多数据库空间，所以切换前请先扩容数据库空间</li>
          <li>2 切换模式2请先停止OA服务，进行数据库扩容。</li>
          <li>3 完成扩容后，修改web-inf/props 下 的openmailbasebean 文件，修改ignore_upgrade_mode_1 为2</li>
          <li>4 修改完成后，重启OA服务器即可。</li>
        </ol>
      ),
      onOk() {},
    });
  }

  render() {
    const preCls = 'email-upgrade';
    const { upgrade_status, percent, resultStatus, resultinfo, dbType, mode } = this.props;
    return [
      <div className={`${preCls}-container`}>
        <Progress ecId={`${this && this.props && this.props.ecId || ''}_Progress@tlrioy@upgrade`}
          type="circle"
          percent={percent}
          status={(upgrade_status && upgrade_status === '1') && resultStatus && resultStatus === '0' ? 'exception' : ''}
          format={() => (percent == 100 ? <i className="icon-coms-complete" /> : `${percent}%`)}
        />
        <div className="tipinfo">
          {(upgrade_status && upgrade_status === '1') && resultStatus && resultStatus === '0' ? resultinfo : '模块升级中，请稍后进入'}
        </div>
      </div>,
      <div className={`${preCls}-tip`}>
        {dbType === 'oracle' && mode === '1' && (
          <p style={{ color: 'red' }}>
            提示：oracle下，目前采用的升级模式 升级耗时会比模式1久，但是占用数据库空间较少，如果需要提速，可切换模式2
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vqy4j1@change`} type="primary" size="small" onClick={this.handleChange} style={{ marginLeft: 10 }}>切换</Button>
          </p>
        )}
      </div>,
    ];
  }
}
